<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getSubjectListAPI } from '@/api/paper'
import { getVideoListAPI } from '@/api/video'
import { formatDate } from '@/utils/format'
import { useRouter } from 'vue-router'

const router = useRouter()

// 学科列表
const subjectList = ref([])
const getSubjectList = async () => {
  const { data: res } = await getSubjectListAPI()
  if (res.status === 200) {
    subjectList.value = res.data
  }
}
getSubjectList()

// 获取视频列表
const videoSearch = ref({
  id: localStorage.getItem('uid'),
  pageIndex: 1,
  pageSize: 10,
  subjectId: '',
  keyword: ''
})
const videoList = ref([])
const total = ref(0)
const getVideoList = async () => {
  const { data: res } = await getVideoListAPI(videoSearch.value)
  if (res.status === 200) {
    videoList.value = res.data
    total.value = res.total
  }
}
getVideoList()

const gotoVideo = (id) => {
  router.push({
    path: `/video/${id}`
  })
}

// 换页
const pageChange = (page) => {
  videoSearch.value.pageIndex = page
  getVideoList()
  window.scrollTo(0, 0)
}
</script>

<template>
  <div class="video-container">
    <div class="video-header">
      <div class="video-header-tab">
        <!-- <span class="video-header-tab-text">试卷类型：</span>
        <div class="video-header-tab-item-box">
          <button
            class="video-header-tab-item active"
            name=""
            @click="tabItemClick"
          >
            全部
          </button>
          <button class="video-header-tab-item" name="1" @click="tabItemClick">
            固定试卷
          </button>
          <button class="video-header-tab-item" name="4" @click="tabItemClick">
            时段试卷
          </button>
        </div> -->
      </div>
      <div class="video-header-select-box">
        <div class="video-header-select-search">
          <el-input
            :prefix-icon="Search"
            placeholder="请输入搜索关键字"
            size="large"
            v-model="videoSearch.keyword"
            clearable
            @change="getVideoList()"
          ></el-input>
        </div>
        <div class="video-header-select">
          <el-select
            v-model="videoSearch.subjectId"
            placeholder="请选择学科"
            size="large"
            clearable
            @change="getVideoList()"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="video-content" v-if="videoList.length > 0">
      <el-card
        shadow="hover"
        class="video-content-item"
        v-for="item in videoList"
        :key="item.id"
        body-style="padding:0"
        @click="gotoVideo(item.id)"
      >
        <el-image style="width: 100%" :src="item.video_photos_src" />
        <div class="video-card-content">
          <h3 style="margin-bottom: 0.2rem">{{ item.video_name }}</h3>
          <p class="video-card-content-text">
            <span class="video-card-content-text-span"> 创建人: </span>
            <el-tag type="success">{{ item.create_user_name }}</el-tag>
          </p>
          <p class="video-card-content-text">
            <span class="video-card-content-text-span"> 创建时间: </span>
            {{ formatDate(item.create_time, 'YYYY-MM-DD') }}
          </p>
        </div>
      </el-card>
    </div>
    <el-empty
      v-else
      description="暂无记录"
      style="min-height: 3.2rem"
    ></el-empty>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="total"
      :page-size="videoSearch.pageSize"
      prev-text="上一页"
      next-text="下一页"
      @current-change="pageChange"
    />
  </div>
</template>

<style lang="scss" scoped>
@media screen and (max-width: 1024px) {
  .video-container {
    margin: 0.2rem 0.6rem;
    .video-header {
      flex-direction: column;
      align-items: flex-start !important;
      padding-bottom: 0.14rem;
      .video-header-tab {
        margin-bottom: 0.14rem;
      }
      .video-header-select-box {
        display: flex;
        width: 100%;
        // flex-direction: column;
        .video-header-select-search {
          flex: 1;
          max-height: 0.5rem;
          margin-bottom: 0.1rem;
          :deep(.el-input--large .el-input__wrapper) {
            padding: 0.01rem 0.15rem;
            font-size: 0.14rem;
          }
        }
        .video-header-select {
          flex: 1;
          max-height: 0.4rem;
          :deep(.el-select--large .el-select__wrapper) {
            padding: 0.08rem 0.16rem;
            font-size: 0.14rem;
          }
        }
      }
    }

    .video-content {
      display: flex;
      flex-wrap: wrap;
      min-height: 3.2rem;
      .video-content-item {
        margin: 0 0.1rem 0.2rem;
        width: calc((100% - 0.4rem) / 2) !important;
      }
    }
    .el-pagination {
      justify-content: flex-end;
      &:deep(.el-icon) {
        font-size: 1.5rem;
      }
      &:deep(.el-pager) {
        .number {
          font-size: 0.16rem;
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}
.video-container {
  margin: 0.2rem 0.6rem;
  .video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.14rem;
    margin-bottom: 0.2rem;
    border-bottom: 0.01rem solid #e1e1e1;
    .video-header-tab {
      display: flex;
      align-items: center;
      flex: 3;
      .video-header-tab-text {
        font-size: 0.14rem;
      }
      .video-header-tab-item-box {
        display: flex;
        .video-header-tab-item {
          margin-right: 0.2rem;
          padding: 0.06rem;
          cursor: pointer;
          border: 0;
          background-color: transparent;
          border-radius: 0.06rem;
          font-size: 0.14rem;
          &.active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }
    .video-header-select-box {
      display: flex;
      flex: 1;
      .video-header-select-search {
        margin-right: 0.1rem;
        display: flex;
        flex: 1;
      }
      .video-header-select {
        flex: 1;
        display: flex;
      }
    }
  }
  .video-content {
    display: flex;
    .video-content-item {
      border-radius: 0.12rem;
      width: calc((100% - 1rem) / 5);
      margin: 0 0.1rem 0.2rem;
      cursor: pointer;
      .video-card-content {
        padding: 0.2rem;
        h3 {
          font-size: 0.2rem;
        }
        .video-card-content-text {
          font-size: 0.14rem;
          margin-bottom: 0.1rem;
          .video-card-content-text-span {
            color: #989898;
          }
        }
      }
    }
  }
  .el-pagination {
    justify-content: flex-end;
    &:deep(.el-icon) {
      font-size: 0.24rem;
    }
    &:deep(.el-pager) {
      .number {
        font-size: 0.16rem;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
}
</style>
